import 'react-native-gesture-handler'
import React, {Component, useEffect,useState} from 'react';
import {View, StyleSheet, StatusBar, TouchableOpacity,Image} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack'
import {HeaderBackButton} from '@react-navigation/elements'
import store from 'react-native-simple-store'
import MainTab from './page/Tab';
import AddDevice from './page/home/addDevice';
import Detail from './page/home/detail';
import {useAppStore} from './store/useAppStore';
import Images from './images/images';
import {DefaultLoading} from './components/loading/useLoading';
import {DefaultToast} from './components/toast/useToast';
import {DefaultModal} from './components/useModal';
import DeviceName from './page/home/deviceName';
import DeviceInfo from './page/home/deviceInfo';
import Contact from './page/home/contact';
import ContactEdit from './page/home/contactEdit';
import ConnectDevice from './page/home/connectDevice';
import {isIos} from './utils/native';
import SplashScreen from 'react-native-splash-screen';
import screen from './utils/screen';
import {DefaultDialog} from './components/dialog/useDialog';
import RootErrorBoundary from './components/rootErrorBoundary';
import {findRouteNameFromNavigatorState} from './utils/common';
import MessageEdit from './page/home/messageEdit';
import DeviceManage from './page/home/deviceManage';
import Template from './page/mine/template';
import TemplateEdit from './page/mine/templateEdit';
import Compass from './page/track/compass';

const Stack = createNativeStackNavigator()

const Root = ()=>{
    return (
        <NavigationContainer
            onStateChange={(navigationState)=>{
                if (navigationState !== undefined) {
                    global.currentRouteName = findRouteNameFromNavigatorState(navigationState)
                }
            }}
        >
            <Stack.Navigator
                initialRouteName={'Tab'}
                screenOptions={({navigation,route}) => ({
                    headerTintColor:"#333",
                    headerTransparent:true,
                    headerLeft: (props)=>{
                        return props.canGoBack && (
                            <HeaderBackButton
                                onPress={() => navigation.goBack()} {...props} tintColor={'#333'}
                                backImage={({tintColor}) => {
                                    return <Image source={Images.back}
                                                  resizeMode={'contain'}
                                                  style={{width:screen.PIXEL_40,height:screen.PIXEL_40}}/>
                                }}/>);
                    } ,
                    headerTitleAlign:'center',
                    headerBackButtonMenuEnabled:false,
                    // headerBackVisible:false,
                    // headerBackTitleVisible:false,
                    // headerBackImageSource:Images.back,
                    animation:'slide_from_right'
                })}
            >
                <Stack.Screen name={"Tab"} component={MainTab} options={{headerShown:false,headerBackVisible:false,headerBackTitle:null}} />
                <Stack.Screen name={"Compass"} component={Compass} options={{title:'星厉详情'}} />
                <Stack.Screen name={"DeviceManage"} component={DeviceManage} options={{title:'终端管理'}} />
                <Stack.Screen name={"AddDevice"} component={AddDevice} options={{headerTransparent:true}}  />
                <Stack.Screen name={"ConnectDevice"} component={ConnectDevice} options={{headerTransparent:true}}  />
                <Stack.Screen name={"Detail"} component={Detail} options={{title:'设备详情'}}  />
                <Stack.Screen name={"DeviceName"} component={DeviceName} options={{title:'设备名称'}}  />
                <Stack.Screen name={"DeviceInfo"} component={DeviceInfo} options={{title:'设备详情'}}  />
                <Stack.Screen name={"Contact"} component={Contact} options={{title:'联系人'}}  />
                <Stack.Screen name={"ContactEdit"} component={ContactEdit} options={{title:'编辑联系人'}}  />

                <Stack.Screen name={"MessageEdit"} component={MessageEdit} options={{title:'新建短信'}}  />
                <Stack.Screen name={"Template"} component={Template} options={{title:'短信模板'}}  />
                <Stack.Screen name={"TemplateEdit"} component={TemplateEdit} options={{title:'添加短信模板'}}  />

            </Stack.Navigator>
        </NavigationContainer>
    )
}

const App = ()=>{
    const {updateAppState} = useAppStore()


    useEffect(()=>{

        if(isIos()){
            StatusBar.setBarStyle('dark-content',true)
        }else{
            //android only
            // StatusBar.setBackgroundColor('#333fff')
            StatusBar.setTranslucent(true)
            SplashScreen.hide()
        }

        store.get('deviceList').then(res=>{
            if(res){
                console.log('local deviceList',res);
                updateAppState({deviceList : res})
            }

        })
        store.get('loc').then(res=>{
            console.log('lastLoc:',res);
            // updateAppState({location: res})
        })
    },[])

    const enter = ()=>{

    }



    return (
        <RootErrorBoundary style={styles.container}>
            <DefaultLoading>
                <DefaultToast>
                    <DefaultDialog>
                        <DefaultModal>
                            <Root/>
                        </DefaultModal>
                    </DefaultDialog>
                </DefaultToast>
            </DefaultLoading>
        </RootErrorBoundary>
    )


}

export default App

const styles = StyleSheet.create({
    container:{
        flex:1
    }
})
